<template>
  <div class="nested">
    <div class="nested-icon" @click="showRight">
      <i class="el-icon-setting" />
    </div>
  </div>

</template>
<script>
export default {
  methods: {
    showRight() {
      this.$store.dispatch('settings/changeSetting', {
        key: 'showSettings',
        value: true
      })
      this.$store.dispatch('settings/changeNotification', {
        key: 'showNotification',
        value: false
      })
    }
  }
}
</script>
<style scoped>
.nested {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}
.nested-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgb(242, 243, 245);
  padding: 6px;
  display: flex;
  justify-content: center;
}
</style>
